<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>B站视频倍速增强</title>
  <style>
    body {
      width: 320px;
      padding: 15px;
      font-family: "Microsoft YaHei", sans-serif;
    }
    
    h1 {
      font-size: 18px;
      margin-top: 0;
      color: #00a1d6;
      text-align: center;
    }
    
    .info {
      font-size: 14px;
      line-height: 1.5;
      margin-bottom: 15px;
    }
    
    .speed-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .speed-item {
      background-color: #f4f4f4;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px 10px;
      font-size: 14px;
    }
    
    .speed-item.custom {
      background-color: #e3f2fd;
      border-color: #bbdefb;
      color: #1976d2;
    }
    
    .section {
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
    }
    
    .custom-speed-form {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .custom-speed-form input {
      width: 70px;
      height: 28px;
      padding: 0 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 10px;
    }
    
    .custom-speed-form button {
      height: 30px;
      background-color: #00a1d6;
      border: none;
      border-radius: 4px;
      color: white;
      padding: 0 12px;
      cursor: pointer;
    }
    
    .custom-speed-form button:hover {
      background-color: #0091c2;
    }
    
    .custom-speeds {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    
    .custom-speed-tag {
      background-color: #e3f2fd;
      border: 1px solid #bbdefb;
      border-radius: 4px;
      padding: 3px 8px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    
    .delete-btn {
      margin-left: 5px;
      color: #f44336;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
    }
    
    .shortcut-section {
      margin-top: 15px;
    }
    
    .shortcut-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 13px;
    }
    
    .shortcut-key {
      background-color: #f4f4f4;
      border: 1px solid #ddd;
      border-radius: 3px;
      padding: 2px 6px;
      font-family: monospace;
    }
    
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 20px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 20px;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
      background-color: #00a1d6;
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(20px);
    }
    
    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .setting-label {
      font-size: 14px;
    }
    
    .footer {
      font-size: 12px;
      color: #999;
      text-align: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #eee;
    }
  </style>
</head>
<body>
  <h1>B站视频倍速增强</h1>
  
  <div class="section">
    <div class="section-title">可用倍速</div>
    <div class="speed-list">
      <div class="speed-item">0.5x</div>
      <div class="speed-item">0.75x</div>
      <div class="speed-item">1.0x</div>
      <div class="speed-item">1.25x</div>
      <div class="speed-item custom">1.35x</div>
      <div class="speed-item">1.5x</div>
      <div class="speed-item custom">1.45x</div>
      <div class="speed-item custom">1.75x</div>
      <div class="speed-item">2.0x</div>
    </div>
  </div>
  
  <div class="section">
    <div class="section-title">自定义倍速</div>
    <div class="custom-speed-form">
      <input type="number" id="customSpeedInput" min="0.1" max="5" step="0.05" placeholder="输入倍速">
      <button id="addCustomSpeedBtn">添加</button>
    </div>
    <div class="custom-speeds" id="customSpeedsList">
      <!-- 自定义倍速标签会在这里动态添加 -->
    </div>
  </div>
  
  <div class="section">
    <div class="section-title">快捷键</div>
    <div class="setting-item">
      <span class="setting-label">启用键盘快捷键</span>
      <label class="toggle-switch">
        <input type="checkbox" id="enableShortcutsToggle" checked>
        <span class="toggle-slider"></span>
      </label>
    </div>
    
    <div class="shortcut-section">
      <div class="shortcut-item">
        <span>增加倍速 (+0.1)</span>
        <span class="shortcut-key">+</span>
      </div>
      <div class="shortcut-item">
        <span>减少倍速 (-0.1)</span>
        <span class="shortcut-key">-</span>
      </div>
      <div class="shortcut-item">
        <span>重置为 1.0 倍速</span>
        <span class="shortcut-key">0</span>
      </div>
      <div class="shortcut-item">
        <span>0.5x 到 2.5x 倍速</span>
        <span class="shortcut-key">1-9</span>
      </div>
    </div>
  </div>
  
  <div class="footer">
    版本 1.0 | 2025
  </div>
  
  <script src="popup.js"></script>
</body>
</html> 
